<template>
  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;background-size: cover;display: flex;flex-direction: column;">
      <img style="width: 180px;position: absolute;left: 40px;top:16px"
           src="http://www.ynpetgc.cn/static/img/logo-top.797dcaac.png">
      <img @click="playLive" style="width: 72px;position: absolute;right: 40px;top:8px;border-radius: 50%"
           src="../../../assets/images/大理大学logo.jpg">
      <div
          style="font-size: 32px;color: gold;margin-top: 16px;text-align: center;display: flex;flex-direction: row;padding: 0px 32px">
        <div style="display: flex;flex-direction: column;flex: 1">
          <span style="justify-self: center;font-size: 42px">{{ userStore.race.name }}</span>
          <span style="justify-self: center">项目抽签</span>

          <el-select style="width: 200px;text-align: right" @change="onchangeSchool" clearable
                     v-model="queryParams.schoolId" placeholder="请选择">
            <el-option
                v-for="item in schoolList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>

        <!--        <audio loop style="display: none" ref="audioPlayer" :src="warning_play_audio" controls></audio>-->

        <!--        <audio style="display: none" ref="audioPlayer2" :src="onlotterySrc" controls></audio>-->


        <ExpandOutlined v-if="!isFullScreen" @click="fullScreen" style="font-size: 18px"/>

        <CompressOutlined v-else @click="exitFullScreen" style="font-size: 18px"/>
      </div>
      <div class="border" v-if="piliangOrchestrateList.length>0"
           style="flex: 1;display: flex;flex-direction: column;background-size: 100% 100%; /* 背景图片覆盖整个元素 */background-repeat: no-repeat; /* 背景图片不重复 */background-position: center;margin: 32px;padding: 32px 16px">
        <div style="flex: 1;display: flex;flex-direction: row">

          <div style="flex: 1;margin: 16px;border-radius: 16px;display: flex;align-items: center;">
            <div
                :style="{'background':piliangOrchestrateList[page * 6 + 0].sex==0?'#65c5ff':'#ff7777'}"
                style="border-radius: 24px;width: 100%;display: flex;align-items: center;font-size: 48px;color: black;font-weight: bolder;height: 320px">
              <image-preview style="margin-left: 8px" :src="piliangOrchestrateList[page * 6 + 0].avatarSrc" :width="140"
                             :height="180"/>

              <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-evenly;height: 100%">

                <span>{{ piliangOrchestrateList[page * 6 + 0].name }}</span>
                <span>性别: {{ piliangOrchestrateList[page * 6 + 0].sex == 0 ? '男' : '女' }}</span>
                <span style="font-size: 24px;margin-top: 16px"> {{
                    piliangOrchestrateList[page * 6 + 0].unitName
                  }}</span>

              </div>
              <div
                  style="flex: 1;font-size: 32px;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly">
                <div v-for="(item,index) in piliangOrchestrateList[page * 6 + 0].children">
                  <span v-if="item.subName!=null">
                    {{ item.subName }}
                  </span>
                  <div style="display: flex;flex-direction: row;justify-content: center;margin: 16px" v-else>
                    <a-button size="large" type="primary" shape="circle" loading/>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style="flex: 1;margin: 16px;border-radius: 16px;display: flex;align-items: center">
            <div
                :style="{'background':piliangOrchestrateList[page * 6 + 1].sex==0?'#65c5ff':'#ff7777'}"
                style="border-radius: 24px;width: 100%;display: flex;align-items: center;font-size: 48px;color: black;font-weight: bolder;height: 320px">
              <image-preview style="margin-left: 8px" :src="piliangOrchestrateList[page * 6 + 1].avatarSrc" :width="140"
                             :height="180"/>
              <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-evenly;height: 100%">
                <span>{{ piliangOrchestrateList[page * 6 + 1].name }}</span>
                <span>性别: {{ piliangOrchestrateList[page * 6 + 1].sex == 0 ? '男' : '女' }}</span>
                <span style="font-size: 24px;margin-top: 16px">{{
                    piliangOrchestrateList[page * 6 + 1].unitName
                  }}</span>

              </div>
              <div
                  style="flex: 1;font-size: 32px;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly">
                <div v-for="(item,index) in piliangOrchestrateList[page * 6 + 1].children">
                  <span v-if="item.subName!=null">
                    {{ item.subName }}
                  </span>
                  <div style="display: flex;flex-direction: row;justify-content: center;margin: 16px" v-else>
                    <a-button size="large" type="primary" shape="circle" loading/>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="flex: 1;margin: 16px;border-radius: 16px;display: flex;align-items: center">
            <div
                :style="{'background':piliangOrchestrateList[page * 6 + 2].sex==0?'#65c5ff':'#ff7777'}"
                style="border-radius: 24px;width: 100%;display: flex;align-items: center;font-size: 48px;color: black;font-weight: bolder;height: 320px">
              <image-preview style="margin-left: 8px" :src="piliangOrchestrateList[page * 6 + 2].avatarSrc" :width="140"
                             :height="180"/>

              <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-evenly;height: 100%">
                <span>{{ piliangOrchestrateList[page * 6 + 2].name }}</span>
                <span>性别: {{ piliangOrchestrateList[page * 6 + 2].sex == 0 ? '男' : '女' }}</span>
                <span style="font-size: 24px;margin-top: 16px">{{
                    piliangOrchestrateList[page * 6 + 2].unitName
                  }}</span>

              </div>
              <div
                  style="flex: 1;font-size: 32px;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly">
                <div v-for="(item,index) in piliangOrchestrateList[page * 6 + 2].children">
                  <span v-if="item.subName!=null">
                    {{ item.subName }}
                  </span>
                  <div style="display: flex;flex-direction: row;justify-content: center;margin: 16px" v-else>
                    <a-button size="large" type="primary" shape="circle" loading/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="flex: 1;display: flex;flex-direction: row">

          <div style="flex: 1;margin: 16px;border-radius: 16px;display: flex;align-items: center">
            <div
                :style="{'background':piliangOrchestrateList[page * 6 + 3].sex==0?'#65c5ff':'#ff7777'}"
                style="border-radius: 24px;width: 100%;display: flex;align-items: center;font-size: 48px;color: black;font-weight: bolder;height: 320px">
              <image-preview style="margin-left: 8px" :src="piliangOrchestrateList[page * 6 + 3].avatarSrc" :width="140"
                             :height="180"/>

              <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-evenly;height: 100%">
                <span> {{ piliangOrchestrateList[page * 6 + 3].name }}</span>
                <span>性别: {{ piliangOrchestrateList[page * 6 + 3].sex == 0 ? '男' : '女' }}</span>
                <span style="font-size: 24px;margin-top: 16px">{{
                    piliangOrchestrateList[page * 6 + 3].unitName
                  }}</span>

              </div>
              <div
                  style="flex: 1;font-size: 32px;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly">
                <div v-for="(item,index) in piliangOrchestrateList[page * 6 + 3].children">
                  <span v-if="item.subName!=null">
                    {{ item.subName }}
                  </span>
                  <div style="display: flex;flex-direction: row;justify-content: center;margin: 16px" v-else>
                    <a-button size="large" type="primary" shape="circle" loading/>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="flex: 1;margin: 16px;border-radius: 16px;display: flex;align-items: center">
            <div
                :style="{'background':piliangOrchestrateList[page * 6 + 4].sex==0?'#65c5ff':'#ff7777'}"
                style="border-radius: 24px;width: 100%;display: flex;align-items: center;font-size: 48px;color: black;font-weight: bolder;height: 320px">
              <image-preview style="margin-left: 8px" :src="piliangOrchestrateList[page * 6 + 4].avatarSrc" :width="140"
                             :height="180"/>

              <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-evenly;height: 100%">
                <span> {{ piliangOrchestrateList[page * 6 + 4].name }}</span>
                <span>性别: {{ piliangOrchestrateList[page * 6 + 4].sex == 0 ? '男' : '女' }}</span>
                <span style="font-size: 24px;margin-top: 16px"> {{
                    piliangOrchestrateList[page * 6 + 4].unitName
                  }}</span>

              </div>
              <div
                  style="flex: 1;font-size: 32px;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly">
                <div v-for="(item,index) in piliangOrchestrateList[page * 6 + 4].children">
                  <span v-if="item.subName!=null">
                    {{ item.subName }}
                  </span>
                  <div style="display: flex;flex-direction: row;justify-content: center;margin: 16px" v-else>
                    <a-button size="large" type="primary" shape="circle" loading/>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="flex: 1;margin: 16px;border-radius: 16px;display: flex;align-items: center">
            <div
                :style="{'background':piliangOrchestrateList[page * 6 + 5].sex==0?'#65c5ff':'#ff7777'}"
                style="border-radius: 24px;width: 100%;display: flex;align-items: center;font-size: 48px;color: black;font-weight: bolder;height: 320px">
              <image-preview style="margin-left: 8px" :src="piliangOrchestrateList[page * 6 + 5].avatarSrc" :width="140"
                             :height="180"/>

              <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-evenly;height: 100%">
                <span>{{ piliangOrchestrateList[page * 6 + 5].name }}</span>
                <span>性别: {{ piliangOrchestrateList[page * 6 + 5].sex == 0 ? '男' : '女' }}</span>
                <span style="font-size: 24px;margin-top: 16px"> {{
                    piliangOrchestrateList[page * 6 + 5].unitName
                  }}</span>

              </div>
              <div
                  style="flex: 1;font-size: 32px;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly">
                <div v-for="(item,index) in piliangOrchestrateList[page * 6 + 5].children">
                  <span v-if="item.subName!=null">
                    {{ item.subName }}
                  </span>
                  <div style="display: flex;flex-direction: row;justify-content: center;margin: 16px" v-else>
                    <a-button size="large" type="primary" shape="circle" loading/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;flex-direction: row;flex-wrap: wrap;height: 100%;padding: 16px"
           v-if="queryParams.schoolId==null">
        <div style="flex-basis: 20%;height: 25%;padding: 8px;" v-for="(item,index) in schoolList">
          <div
              style="background: #ffffffdd;margin: 8px;height: 100%;width: 100%;border-radius: 24px;display: flex;align-items: center">
            <div style="margin: 8px;flex: 2">
              <image-preview style="margin-left: 8px;border-radius: 50%" :src="item.badgeSrc" :width="120"
                             :height="120"/>
              <div style="font-size: 32px">
                <span>{{ item.name }}</span>

              </div>
            </div>
            <div v-if="isLottery" style="flex: 1">
              <a-spin size="large" v-if="!item.lotterySort"/>
            </div>
            <div v-if="item.lotterySort" style="flex: 1">
              <div
                  style="font-size: 32px;background: red;border-radius: 50%;width: 64px;height:64px;color: white;font-weight: bolder;display: flex;flex-direction: row;align-items: center;justify-content: center">
                {{ item.lotterySort }}
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </dv-border-box1>
</template>

<script>
import useUserStore from "@/store/modules/user.js";
import {list, update, lottery, outputExcel} from "@/api/business/orchestrate";
import {message} from "ant-design-vue";
import {listSchool} from "@/api/business/school.js";

export default {
  name: "index",
  data() {
    const userStore = useUserStore()
    const channel = new BroadcastChannel('enterScore');
    let queryParams = {
      subId: null,
      pageNum: 1,
      pageSize: 10,
      schoolId: null,
      no: null,
      avatarSrc: null,
      name: null,
      stuNo: null,
      className: null,
      nation: null,
      sex: null,
      birth: null,
      birthPlace: null,
      cardId: null,
      mailAddress: null,
      mobile: null,
      oneConfirm: null,
      oneConfirmTime: null,
      twoConfirm: null,
      twoConfirmTime: null,
      editShow: true,

      tableLoading: true,

    };
    return {
      url: window.location.host + ":8080",
      userId: userStore.id,
      isFullScreen: false,
      userStore,
      timeText: '2024-23',
      channel,
      showInfo: null,
      piliangOrchestrateList: [],
      page: 0,
      queryParams,
      subIdList: [7, 8, 10],
      bhList: [],
      schoolList: [],
      isLottery: false,
    }
  },
  mounted() {
    this.getSchoolList();
    window.addEventListener('keydown', this.handleKeyDown);
    this.fullScreen();
    this.channel.addEventListener('message', event => {
      const message = event.data;
      if (message.type == "lottery") {
        console.log(message.params);
        this.getList(message.params);
      }
      console.log(message)
    });
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    fullScreen() {
      this.isFullScreen = true;
    },
    exitFullScreen() {
      this.isFullScreen = false;
    },
    /** 查询学校列表 */
    getSchoolList() {
      let that = this;
      listSchool(
          {pageSize: 0}
      ).then(response => {
        that.schoolList = response.rows;
        for (let i = 0; i < that.schoolList.length; i++) {
          that.bhList.push(i + 1);
        }
      });
    },
    onchangeSchool() {

      this.getList();
    },
    async getList() {
      let that = this;
      let localList = [];

      const map = new Map();
      // myMap.set('key1', 'value1');
      // myMap.set('key2', 'value2');
      // myMap.set('key3', 'value3');


      for (let i = 0; i < this.subIdList.length; i++) {
        this.queryParams.subId = this.subIdList[i];
        await list(this.queryParams).then(response => {
          for (let j = 0; j < response.rows.length; j++) {
            let row = response.rows[j];
            let flag = false;
            for (let k = 0; k < localList.length; k++) {
              if (localList[k].objectId == row.objectId) {
                flag = true;
                localList[k].children.push(row);
              }
            }
            if (!flag) {
              let obj1 = this.deepClone(row);
              obj1.children = [];
              let obj = this.deepClone(row);
              obj1.children.push(obj);
              localList.push(obj1);
            }
          }
        }).catch(err => {
          that.piliangOrchestrateList = [];
        });
      }
      console.log(localList)
      console.log(localList.length)
      that.piliangOrchestrateList = localList;

    },
    deepClone(target) {
      if (typeof target === 'object' && target !== null) {
        return JSON.parse(JSON.stringify(target));
      } else {
        return target;
      }
    },
    handleKeyDown(event) {
      console.log(event.key)
      if (event.key === 'Space' || event.key === ' ') {
        console.log("start");
        if (this.queryParams.schoolId == null) {
          this.startLotterySchoolSort();
        } else {
          this.startLottery();
        }

      }
      if (event.key === 'ArrowLeft') {
        // if (this.page > 0) {
        //   this.page--;
        // }
        // this.queryParams.schoolId = this.schoolList[this.page];
      }
      if (event.key === 'ArrowRight') {
        // this.page++;
        // this.queryParams.schoolId = this.schoolList[this.page];
        // console.log(this.queryParams.schoolId);
      }

    },
    startLotterySchoolSort() {
      if (this.isLottery) {
        return;
      }
      const key = 'updatable';
      message.loading('抽签中', key, 0);
      this.isLottery = true;
      setTimeout(async () => {
        for (let i = 0; i < this.schoolList.length; i++) {
          let num = await this.lottery(1);
          console.log("sort:" + JSON.stringify(num))
          this.schoolList[i].lotterySort = num.index;
        }
        this.schoolList.sort((a, b) => a.lotterySort - b.lotterySort); // 根据年龄升序排序
        message.success({content: '抽签完成!', key, duration: 2});
        this.isLottery = false;
      }, 1000)
    },
    lottery(count) {

      let that = this;
      var ret = this.bhList
          .filter(function (m, index) {
            return !that.choosed(m);
          })
          .map(function (m) {
            let ob = Object.assign({
              index: m,
              score: Math.random()
            }, m);

            return ob;
          })
          /*排序*/
          .sort(function (a, b) {
            return a.score - b.score;
          })
          /*截取数组*/
          .slice(0, count)
          /*遍历循环元素*/
          .map(function (m) {
            /*新增一个被抽中的员工*/
            // choosed[m.name] = 1;
            // /*重新合并*/
            // that.selectStuList.push(m)

            return m;
          });

      return ret[0];
    },
    choosed(sort) {
      let select = false;
      for (let i = 0; i < this.schoolList.length; i++) {
        if (this.schoolList[i].lotterySort == sort) {
          select = true;
        }
      }


      return select;
    },
    async startLottery() {
      if (this.isLottery) {
        return;
      }
      this.isLottery = true;
      const key = 'updatable';
      message.loading('抽签中', key, 0);
      let that = this;
      for (let i = 0; i < this.piliangOrchestrateList.length; i++) {
        let children = this.piliangOrchestrateList[i].children;
        console.log(children)
        for (let j = 0; j < children.length; j++) {
          console.log(i + ":" + j)
          await lottery(children[j]).then(response => {
            console.log(response.data);
            children[j] = response.data;
          })
        }
      }
      message.success({content: '抽签完成!', key, duration: 2});
      this.isLottery = false;
    }
  }
}
</script>

<style scoped>
.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.border {
  background-image: url('../../../assets/images/border.png')
}

.loading {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.loading span {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load 1s ease infinite;
}

@-webkit-keyframes load {
  0%, 100% {
    height: 40px;
    background: lightgreen;
  }
  50% {
    height: 70px;
    margin: -15px 0;
    background: lightblue;
  }
}

.loading span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
}

.loading span:nth-child(3) {
  -webkit-animation-delay: 0.4s;
}

.loading span:nth-child(4) {
  -webkit-animation-delay: 0.6s;
}

.loading span:nth-child(5) {
  -webkit-animation-delay: 0.8s;
}
</style>